<!-- 收货方扫描签收的数量确认列表 -->
<template>
  <div class="gridContainer">
    <div class="m-det-warp mb30">
      <div class="m-det-tit">业务单号：{{BbMain.BBillNo}}</div>
      <div class="m-det-list">
        <ul class="m-det-ul">
          <li class="displayflex">
            <span class="label">制单时间</span>
            <div class="flex1 value">{{BbMain.InputDate | time}}</div>
          </li>
          <li class="displayflex">
            <span class="label">送货联系人</span>
            <div class="flex1 value">{{PoMain.SendContacts}} {{PoMain.SendContactsTel}}</div>
          </li>
          <li class="displayflex">
            <span class="label">总数量</span>
            <div class="flex1 value"><em class="red">{{TotalPkgs}}</em></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="mb30"
         v-for="(item, index) in todolist">
      <div class="m-list-warp">
        <div class="m-list-pictxt">
          <div class="displayflex">
            <div class="pic w200"><img :src="item.PictContent | filterImg"></div>
            <div class="m-list-txt flex1">
              <p>{{item.GoodsName}}</p>
              <p class="gray">{{item.GoodsSpec}}</p>
              <p class="gray">{{item.Producer}}</p>
              <p>共<em class="red">{{item.Pkgs}}</em></p>
            </div>
          </div>
        </div>
      </div>
      <div class="m-checknum-wrap displayflex">
        <span class="cn-lft">签收数量:</span>
        <div class="cn-ipt-wrap flex1 cf">
          <div class="cn-ipt-box f-l cf">
            <span class="icon minus f-l"
                  @click="changeNum(index,-1)"></span>
            <span class="ipt f-l">
              <input class="red"
                     style="padding:0"
                     type="text"
                     v-model="item.RecPKGS"
                     @input="addSum(index)">
            </span>
            <span class="icon add f-r"
                  @click="changeNum(index,1)"></span>
          </div>
          <!-- <span class="cn-unit f-l">件</span> -->
        </div>
        <div class="btn-checknum"
             @click="recebtn(index,$event)">签收</div>
        <div class="flex1 cn-rece">
          <div>签收数量:<em>{{item.RecPKGS}}</em></div>
          <div class="icon-rece"><img src="~images/icon/tag_yqs.png"></div>
        </div>
      </div>
    </div>
    <div class="w100fix"></div>
    <div class="checknum-bot displayflex">
      <div class="num">共<em class="red">{{goodSum}}</em>商品</div>
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l cancel"
              @click="cancel">取消</li>
          <li class="btn-checknum f-l"
              @click="Confirm()">确认收货</li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data: function () {
    return {
      BbMain: {},
      PoMain: {},
      Vehicle: {},
      BbDetailList: [],
      todolist: [],
      datas: {},
      OriginTodolist: [],
      clickBtn: [],
      goodSum: 0,
      TotalPkgs: 0,
    };
  },
  computed: {
    userinfo () {
      return localStorage.getItem('userinfo') ? JSON.parse(localStorage.getItem('userinfo')) : null;
    }
  },
  methods: {
    getData () {
      let query = {
        Guid: this.$route.query.Guid,
        QueryType: 'Tracing',
      };
      this.Ajax.post('GetOrderDetail', query).then((res) => {
        if (res.IsSuccess) {
          this.BbMain = res.Data.BbMain;
          this.PoMain = res.Data.PoMain;
          this.Vehicle = res.Data.Vehicle;
          this.VehicleDetail = res.Data.VehicleDetail;

          let GoodsList = JSON.parse(JSON.stringify(res.Data.VehicleExies));
          GoodsList.forEach(x => {
            let goodItem = res.Data.BbDetailList.find(y => {
              return parseInt(y.RowNo) == parseInt(x.BBillRowNo);
            });

            x.Pkgs = x.Pkgs ? parseInt(x.Pkgs) : 0;
            x.RecPKGS = x.RecPKGS ? parseInt(x.RecPKGS) : parseInt(x.Pkgs);
            x.GoodsName = goodItem.GoodsName;
            x.GoodsSpec = goodItem.GoodsSpec;
            x.Producer = goodItem.Producer;
            this.TotalPkgs += x.Pkgs;
            this.clickBtn.push(false);
          });
          this.todolist = GoodsList;
          this.OriginTodolist = JSON.parse(JSON.stringify(GoodsList));
          this.addSum();
        } else {
          this.Toast({
            message: '订单信息获取失败，请重试',
          });
        }
      }).catch(e => {
        console.log(e)
      });
    },

    changeNum (index, way) {
      if (way > 0) {
        if (this.todolist[index].RecPKGS == this.todolist[index].Pkgs) {
          this.Toast({
            message: '签收数量不能大于提货数量',
          });
          return false;
        }
        this.todolist[index].RecPKGS++;
        this.addSum();
      } else if (way < 0 && this.todolist[index].RecPKGS > 0) {
        this.todolist[index].RecPKGS--;
        this.addSum();
      } else {
        this.Toast({
          message: '签收数量不能小于零件',
        });
      }
    },

    recebtn: function (index, e) {
      var _this = e.target;
      $(_this).siblings(".cn-rece")[0].style.display = "block";
      $(_this).siblings(".cn-lft")[0].style.display = "none";
      $(_this).siblings(".cn-ipt-wrap")[0].style.display = "none";
      $(_this)[0].style.display = "none";
      this.clickBtn[index] = true;
      this.addSum();
    },

    addSum (index) {
      if (index || index == 0) {
        if (this.todolist[index].RecPKGS) {
          this.todolist[index].RecPKGS = parseInt(this.todolist[index].RecPKGS);
        } else {
          this.todolist[index].RecPKGS = 0;
        }
        if (this.todolist[index].RecPKGS > this.todolist[index].Pkgs) {
          this.Toast({
            message: '签收数量不能大于提货数量',
          });
          this.todolist[index].RecPKGS = parseInt(this.todolist[index].Pkgs);
        }
      };

      this.goodSum = 0;
      this.todolist.forEach(x => {
        this.goodSum += x.RecPKGS ? parseInt(x.RecPKGS) : 0;
      });
    },

    Confirm: function () {
      let OrderInfo = {
        BbMain: this.BbMain,
        PoMain: this.PoMain,
        Vehicle: this.Vehicle,
        VehicleDetail: this.VehicleDetail,
      };

      sessionStorage.setItem('goodslist', JSON.stringify(this.todolist));
      sessionStorage.setItem('orderlist', JSON.stringify(OrderInfo));

      this.$router.push({
        path: 'receiveconfirmpic'
      });
    },

    cancel () {
      this.$router.push({
        path: '/driver/carDone'
      })
    }
  },
  created: function () {
    this.getData();
  }
};
</script>